<template>
    <div class="table">
            <!-- <el-button type="primary" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;发布动态</el-button> -->
            <div style="height:40px"></div>
            <div class="handle-box">
                 <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item label="印厂名称:">
                        <el-input v-model="title" placeholder="请输入印厂名称" clearable style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSelect"> &nbsp;&nbsp;查询&nbsp;&nbsp;  </el-button>
                        
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="id" label="ID" width="80" align="center">
                </el-table-column>
                <el-table-column label="封面图" width="220" >
                    <template slot-scope="scope">
                        <img :src="scope.row.head_img" style="width:200px;height:120px;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="company_name" label="公司名称" align="center">
                </el-table-column>
                <el-table-column prop="category_name" label="所属分类" width="170" align="center">
                </el-table-column>
                <el-table-column type="expand" label="查看更多" width="120" align="center">
                    <template slot-scope="props">
                        <div class="bs-callout bs-callout-danger">
                            <div>
                                <span style="padding-left:30px;"></span>联系人：{{props.row.contact}}
                                <span style="padding-left:30px;"></span>手机号码: {{props.row.mobile}}
                                <span style="padding-left:30px;"></span>联系地址：{{props.row.address}}
                                <span style="padding-left:30px;"></span>公司规模：{{props.row.person_scale}}人
                                <span style="padding-left:30px;"></span>主营业务：{{props.row.main_business}}
                               
                            </div>
                            <div>
                                <span style="padding-left:30px;"></span>主要设备：{{props.row.main_device}}
                                <span style="padding-left:30px;"></span>主要荣誉：{{props.row.main_honor}}
                                <span style="padding-left:30px;"></span>公司资质：{{props.row.main_qualification}}
                                <span style="padding-left:30px;"></span>创建时间：{{props.row.create_time}}
                            </div>
                            <div class="img-box">
                                <!-- <img :src="JSON.parse(props.row.banner_img)"> -->
                                详情图：
                                <img v-for="item in props.row.banner_img" :key="item" :src="item" />
                            </div>
                            <div class="img-box">
                                <!-- <img :src="JSON.parse(props.row.banner_img)"> -->
                                营业执照    ：
                                <img v-for="item in props.row.business_license" :key="item" :src="item" />
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="200" align="center">
                    <template slot-scope="scope">
                        <!-- <el-button size="small" type="text" @click="handleSel(scope.$index, scope.row)">查看</el-button> -->
                        <el-button class="download" size="small" type="text" @click="handlePass(scope.$index, scope.row)">审核通过</el-button>
                        <el-button class="del" size="small" type="text" @click="handleDelete(scope.$index, scope.row)">审核不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" >
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalPages" background>
                    </el-pagination>
                </div>
       <!-- 审核通过提示框 -->
        <el-dialog title="提示" :visible.sync="passVisible" width="300px" center>
            <div class="del-dialog-cnt">你确定审核通过？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow(1)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 审核不通过提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">你确定审核不通过？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow(2)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getFenzhanPublicList,postFenzhanPblicCheck} from "@/api/branch/activity";
export default {
    name:"activityList",
    data () {
        return {
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalPages:1,//默认的总条数
            title:'',// 标题
            tableData:[],//表格数据
            passVisible:false,//审核通过
            delVisible:false, //是否显示查看详情弹出层
            delIndex:0,
            delId:0,
            imgList:[],//图片s数组 用于放banner
        }
    },
    computed:{
        ...mapGetters(['userInfo']),
    },
    mounted() {
        // console.log(this.userInfo)
        this.$nextTick(function () {
            //获取待处理的数据
            this.getListData();  
        })
    },
    filters:{
        typeText:function(value){
            var x="诗歌散文";
            switch (value) { 
                case 1:x="摄影园地"; 
                break; 
                case 2:x="随笔"; 
                break;  
            }
            return x;
        }
    },
    methods: {
        //获取tabs数据
        getListData (){
            let para ={};
            para.type = 7;//要查询的对象类型：1活动、2动态、3心情、4求购、5供应、6二手、7印厂、8设备、9招聘职位
            para.cityId = this.userInfo.city_id; //分站ID
            para.isChecked = 2;//审核状态：1所有、2审核中、3审核不通过、4审核通过
            para.title = this.title;//标题或产品名
            //具体类型：如果是查询动态，7种类型：1企业动态、2本地新闻、3协会动态、4政策动态、5本地人物、6企业访谈、7评析；
            //如果是查询心情，3种类型：1摄影园地，2随笔，3诗歌散文；
            //其他类型查询和查询全部传：0
            para.dataType = 0;
            para.pageIndex = this.pageIndex;
            para.pageSize = this.pageSize;
            //获取活动的数据
            getFenzhanPublicList(para).then(response=>{
                console.log(response);
                if(response.code==200){
                    var data  =response.data;
                    var list = data.list;
                    for (let index = 0; index < list.length; index++) {
                        var array =[];
                        var ary = [];
                        try{
                            array = JSON.parse(list[index].banner_img);
                            ary = JSON.parse(list[index].business_license);
                        }catch(e){
                        }
                        list[index].banner_img = array;
                        list[index].business_license = ary;
                        
                    }
                    
                    this.tableData = list;
                    this.totalPages = data.total;//总条数
                }else{
                    this.$notify.error({
                        title: '异常',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
            });
            
        },
        // 分页导航
        handleCurrentChange (val){
           this.pageIndex = val;
            this.getListData();
        },
        //查询
        onSelect(){
            this.pageIndex =1;
            this.getListData();
        },
        //查看
        handleSel(index, row) {
            if (row.id && row.id > 0) {
                //跳转到详情
                this.$router.push({ path: "/branch/mood/select" ,query:{id:row.id } });
            }
        },
        //同意审核
        handlePass(index,row){
            this.delIndex =index;//要删除的下标
            this.delId = row.id; //要删除的ID
            this.passVisible = true; //显示兑换弹出框
        },
        //不同意
        handleDelete(index,row){
            this.delIndex =index;//要删除的下标
            this.delId = row.id; //要删除的ID
            this.delVisible = true; //显示兑换弹出框
        },
        // 确定删除
        deleteRow(type){
            //console.log(this.delId)
            if(this.delId>0){
                if(type==1){
                    //对象类型： 1活动、2动态、3心情、4求购、5供应、6二手7印厂、8设备、9招聘职位
                    //要审核的对象ID
                    //审核结果：1审核不通过、2审核通过
                    postFenzhanPblicCheck(7,this.delId,2).then(response=>{
                        // console.log(response);
                        if(response.code==200){
                            this.tableData.splice(this.delIndex, 1);
                            this.$message.success('操作成功');
                            this.passVisible = false;
                        }else{
                            this.$notify.error({
                                title: '操作失败',
                                duration:2000,
                                message: '失败原因：'+response.data.msg
                            });
                        }
                    })
                }else{
                    //对象类型： 1活动、2动态、3心情、4求购、5供应、6二手
                    postFenzhanPblicCheck(7,this.delId,1).then(response=>{
                        // console.log(response);
                        if(response.code==200){
                            this.tableData.splice(this.delIndex, 1);
                            this.$message.success('操作成功');
                            this.delVisible = false;
                        }else{
                            this.$notify.error({
                                title: '操作失败',
                                duration:2000,
                                message: '失败原因：'+response.data.msg
                            });
                        }
                        
                    })
                }
                
            }
            
        }
    }
}
</script>
<style lang="stylus" scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
        margin-right :30px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .edit {
    color: #ff9800;
}

.del {
    color: #e51c23;
}

.download {
    color: #67C23A;
}
.bs-callout {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
    .bs-callout-danger {
    border-left-color: #ce4844;
}
.left{
    float:left;
    width :150px;
    text-algin:center;
}
.right{
    float:left;
    width :550px;
}
.img-box{
    padding-left :30px;
    margin-top :10px;
    img{
        height:150px;
        width:auto;
        margin-right :10px;
        margin-bottom :10px;
    }
  
}
</style>


